import { RatingDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Rating);

## Usage

<Demo data={RatingDemos.configurator} />

## Controlled

```tsx
import { useState } from "react";
import { Rating } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState(0);
  return <Rating value={value} onChange={setValue} />;
}
```

## Read only

<Demo data={RatingDemos.readOnly} />

## Fractions

<Demo data={RatingDemos.fractions} />

## Custom symbol

<Demo data={RatingDemos.symbol} />

## Symbols for each item

<Demo data={RatingDemos.customSymbol} />
